<template>
    <div class="order-detail">
        <el-card shadow="never">
            <el-page-header @back="goBack" content="订单详情"></el-page-header>

            <div v-loading="loading" element-loading-text="加载中...">
                <!-- 基本信息 -->
                <el-divider content-position="left" style="margin-bottom: 30px;">基本信息</el-divider>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form label-width="120px" :inline="false" :model="detail" disabled>
                            <el-form-item label="订单编号：">
                                <el-input v-model="detail.orderNo" />
                            </el-form-item>
                            <el-form-item label="订单类型：">
                                <el-tag :type="ORDER_TYPE_MAP[detail.orderType]?.type || 'info'">
                                    {{ ORDER_TYPE_MAP[detail.orderType]?.label || detail.orderType || '未知' }}
                                </el-tag>
                            </el-form-item>
                            <el-form-item label="订单状态：">
                                <el-tag :type="ORDER_STATUS_MAP[detail.orderStatus]?.type || 'info'">
                                    {{ ORDER_STATUS_MAP[detail.orderStatus]?.label || detail.orderStatus || '未知' }}
                                </el-tag>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="8">
                        <el-form label-width="120px" :model="detail" disabled>
                            <el-form-item label="客户姓名：">
                                <el-input v-model="detail.cusName" />
                            </el-form-item>
                            <el-form-item label="物料类型：">
                                <el-tag :type="MATERIAL_TYPE_MAP[detail.materialType]?.type || 'info'">
                                    {{ MATERIAL_TYPE_MAP[detail.materialType]?.label || detail.materialType || '未知' }}
                                </el-tag>
                            </el-form-item>
                            <el-form-item label="下单时间：">
                                <el-input :value="formatDateTime(detail.orderTime)" />
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="8">
                        <el-form label-width="120px" :model="detail" disabled>
                            <el-form-item label="重量(g)：">
                                <el-input :value="formatWeight(detail.weight)" />
                            </el-form-item>
                            <el-form-item label="仓管费(元)：">
                                <el-input :value="formatPrice(detail.manageFee)" />
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>

                <!-- 价格信息 -->
                <el-divider content-position="left">价格信息</el-divider>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form label-width="140px" :model="detail" disabled>
                            <el-form-item label="下单单价(元/g)：">
                                <el-input :value="formatPrice(detail.orderPrice)" />
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="8">
                        <el-form label-width="140px" :model="detail" disabled>
                            <el-form-item label="止盈单价(元/g)：">
                                <el-input :value="formatPrice(detail.stopProfitLimit)" />
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="8">
                        <el-form label-width="140px" :model="detail" disabled>
                            <el-form-item label="止损单价(元/g)：">
                                <el-input :value="formatPrice(detail.stopLossLimit)" />
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>

                <!-- 资金信息（可选） -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form label-width="140px" :model="detail" disabled>
                            <el-form-item label="定金初始金额(元)：">
                                <el-input :value="formatPrice(detail.retainerAmount)" />
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="8">
                        <el-form label-width="140px" :model="detail" disabled>
                            <el-form-item label="定金余额(元)：">
                                <el-input :value="formatPrice(detail.retainerAmountBalance)" />
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
  </template>

<script>
import { getOrderDetail } from './api/order'
import { ORDER_STATUS_MAP, ORDER_TYPE_MAP, MATERIAL_TYPE_MAP } from './options'

export default {
    name: 'OrderDetail',
    data() {
        return {
            loading: false,
            detail: {},
            ORDER_STATUS_MAP,
            ORDER_TYPE_MAP,
            MATERIAL_TYPE_MAP
        }
    },
    mounted() {
        const id = this.$route.params.id
        if (id) {
            this.fetchDetail(id)
        }
    },
    methods: {
        async fetchDetail(id) {
            this.loading = true
            try {
                const res = await getOrderDetail(id)
                this.detail = res || {}
            } catch (e) {
                // this.$message.error('获取订单详情失败')
            } finally {
                this.loading = false
            }
        },
        goBack() {
            this.$router.go(-1)
        },
        formatPrice(price) {
            if (price === null || price === undefined || price === '') return '0.00'
            const num = Number(price)
            if (!isFinite(num)) return '0.00'
            return num.toLocaleString('zh-CN', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            })
        },
        // 格式化日期时间
        formatDateTime(dateTime) {
            if (!dateTime) return '-'
            const date = new Date(dateTime)
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            })
        },
        // 重量 千分符
        formatWeight(weight) {
            if (weight === null || weight === undefined || weight === '') return '0'
            const num = Number(weight)
            if (!isFinite(num)) return '0'
            return num.toLocaleString('zh-CN')
        }
    }
}
</script>

<style lang="scss" scoped>
.order-detail {
    padding: 20px;
}

.el-divider {
    margin: 30px 0 10px 0;

    ::v-deep .el-divider__text {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
    }
}

.el-form-item {
    margin-bottom: 14px;
}
</style>


